72 - Navigation

因为react navigation对不使用expo的应用也能行，所以接下来学习react navigation。文档：https://reactnavigation.org/

1、创建项目npx create-expo-app@latest RNNavigation --template blank，这个命令会创建一个没有expo router的项目，方便我们学习react navigation。

2、安装react navigation：npm install @react-navigation/native

3、安装依赖：npx expo install react-native-screens react-native-safe-area-context

4、在入口文件（App.js / App.tsx）启用 NavigationContainer

​x
1
// App.js
2
​
3
import { NavigationContainer } from "@react-navigation/native";
4
​
5
export default function App() {
6
  return <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>;
7
}

接下来，就可以在App里面写导航相关的代码了。

73 - Stack Navigation

React Navigation 的 Navigator 大概分成四大类：

1. Stack Navigator（堆栈导航）
2. Tab Navigator（底部/顶部 Tab 导航）
3. Drawer Navigator（侧边抽屉导航）
4. Material 系导航（Tab/Top/Bottom）

1️⃣ Stack Navigator（最常用、页面跳转）

就像浏览器前进/后退、App 页面跳转一样：

xxxxxxxxxx
1
1
Home → List → Detail → Settings

每个页面像“一张纸”压在另一张上面。

⭐ 特点

• 有“入栈 / 出栈”机制（push/pop）
• 自带标题栏（header）
• 支持动画（iOS 推入动画 / Android 淡入）
• 世界上 80% 的 App 页面跳转用 Stack

⭐ 适合场景

• 详情页
• 登录流程
• 配置页面
• 多级页面跳转

⭐ 典型用法

xxxxxxxxxx
1
1
const Stack = createNativeStackNavigator();

---

2️⃣ Tab Navigator（底部导航 ⁄ 顶部导航）

底部菜单栏：

xxxxxxxxxx
1
1
[Home] [Explore] [Profile]

用户点击 Tab 切换页面。

⭐ 特点

• 永远显示在底部（或顶部）
• 可以为每个 Tab 配置图标
• 内部通常嵌套 Stack（非常常见）

⭐ 适合场景

• App 主体结构
• Home、Search、Notifications、Profile 等一级功能

⭐ 用法

xxxxxxxxxx
1
1
const Tab = createBottomTabNavigator();

---

3️⃣ Drawer Navigator（侧边抽屉导航）

左侧滑出（或右侧）的菜单：

xxxxxxxxxx
1
1
|≡|   →   抽屉滑出

⭐ 特点

• 左滑出现，常做“设置/个人中心/管理项”
• 类似微信的“我”、Google 的侧边栏
• 支持自定义抽屉内容

⭐ 适合场景

• 内容很多但不需要一直显示的菜单
• 管理类、设置类应用

⭐ 用法

xxxxxxxxxx
1
1
const Drawer = createDrawerNavigator();

---

4️⃣ Material 系导航（根据 UI 规范设计）

如果你想做更“安卓风格”的 UI，可以用：

🔹 Material Bottom Tabs

xxxxxxxxxx
1
1
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

🔹 Material Top Tabs

xxxxxxxxxx
1
1
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

⭐ 特点

• 使用 Material Design 风格
• Android 风格更强
• 更丰富的交互（滑动、波纹效果）

⭐ 适合场景

• 想让 UI 更接近 Google 原生设计时

---

🧩 那这些 Navigator 应该怎么组合？

几乎所有大型 RN 应用结构都是：

xxxxxxxxxx
6
1
RootStack
2
 ├── AuthStack（未登录）
3
 └── AppTabs（登录后）
4
        ├── HomeStack
5
        ├── ExploreStack
6
        └── ProfileStack

也就是说：

⭐ 顶层是 Stack

因为你需要处理：

• 首次进入
• 登录页
• 主应用页
• 404 / Modal 等

⭐ Tabs 放在 Stack 里

因为 Tab 是“主骨架”。

⭐ Drawer 也通常放在 Stack 里

因为 Drawer 控制行为通常独立。

---

🎯 什么时候选哪种？

📌 想“页面跳转” → Stack

📌 想“底部切换功能” → Tabs

📌 想“滑出菜单” → Drawer

📌 想“安卓风格 Tab（顶部/底部）” → Material 系 Navigator

---

🔥 最常见的实际用法（强烈推荐）

99% 项目这样写：

xxxxxxxxxx
7
1
NavigationContainer
2
 └── RootStack
3
      ├── LoginStack
4
      └── MainTabs
5
           ├── HomeStack
6
           ├── ExploreStack
7
           └── ProfileStack

这是大厂 RN 项目的标准结构。

Stack Navigator（堆栈导航）模拟的是 iOS / Android 原生的页面跳转方式：

• A → B → C 页面逐层“叠加”
• 可以后退（goBack）
• 可以替换页面（replace）
• 可以清空整个栈（reset）

Stack Navigation有两种，一种是Stack Navigator，另一种是Native Stack Navigator。课程中老师只讲解Native Stack Navigator，参考文档：https://reactnavigation.org/docs/native-stack-navigator

安装依赖：npm install @react-navigation/native-stack

🧱 Stack Navigator 组成部分

一个 Stack Navigator 有三个核心角色：

1. NavigationContainer：导航容器（必须包裹整个导航树）
2. createNativeStackNavigator()：创建 Stack 对象
3. Stack.Screen：注册页面

在入口文件（App.js / App.tsx）启用NavigationContainer

xxxxxxxxxx
17
1
// App.js
2
​
3
import { NavigationContainer } from "@react-navigation/native";
4
import { createNativeStackNavigator } from "@react-navigation/native-stack";
5
​
6
const Stack = createNativeStackNavigator();
7
​
8
export default function App() {
9
  return (
10
    <NavigationContainer>
11
      <Stack.Navigator>
12
        {/* 定义了页面之后，需要在这里使用Stack.Screen来指定页面 */}
13
        {/* <Stack.Screen name="Home" /> */}
14
      </Stack.Navigator>
15
    </NavigationContainer>
16
  );
17
}

Stack.Screen核心属性：

options属性

定义页面

定义两个相似的页面HomeScreen.js和AboutScreen.js，这里只展示HomeScreen的代码。

xxxxxxxxxx
23
1
// screens/HomeScreen.js
2
​
3
import { Text, View, StyleSheet } from "react-native";
4
​
5
export default function HomeScreen() {
6
  return (
7
    <View style={styles.container}>
8
      <Text style={styles.text}>Home Screen</Text>
9
    </View>
10
  );
11
}
12
const styles = StyleSheet.create({
13
  container: {
14
    flex: 1,
15
    alignItems: "center",
16
    justifyContent: "center",
17
  },
18
  text: {
19
    fontSize: 24,
20
    fontWeight: "bold",
21
    marginBottom: 16,
22
  },
23
});

在App.js中引入并使用具体页面

xxxxxxxxxx
18
1
import { NavigationContainer } from "@react-navigation/native";
2
import { createNativeStackNavigator } from "@react-navigation/native-stack";
3
import HomeScreen from "./screens/HomeScreen";
4
import AboutScreen from "./screens/AboutScreen";
5
​
6
const Stack = createNativeStackNavigator();
7
​
8
export default function App() {
9
  return (
10
    <NavigationContainer>
11
      <Stack.Navigator>
12
        {/* 定义了页面之后，需要在这里使用Stack.Screen来指定页面 */}
13
        <Stack.Screen name="Home" component={HomeScreen} />
14
        <Stack.Screen name="About" component={AboutScreen} />
15
      </Stack.Navigator>
16
    </NavigationContainer>
17
  );
18
}

查看效果：

可以看到，只展示了HomeScreen页面，那页面之间怎么跳转呢？下节课会讲到。

74 - Navigation between Screens

可以通过navigation prop或者useNavigation()这个hook来实现页面之间的跳转。

navigation prop

在 Stack Navigator 中，只要一个组件是作为 Stack.Screen 的 component 属性注册的，它就会自动接收到 navigation 和 route 这两个 props。

使用navigation的navigate方法，进行跳转。

可以看到，从Home跳转到了About页面，同时上面还有一个返回按钮。

useNavigation

两种跳转方式在哪些情况下使用

75 - Passing Data between Screens

在Screens之间传递数据。

路由参数 (Route Params)

在调用 navigation.navigate() 或 navigation.push() 时，将数据作为第二个参数的对象传递。在目标屏幕组件中，通过 route.params 访问数据。

效果：

怎么在About里面向Home传递数据呢？如果是手动触发，那么还是可以在navigation.navigate的第二个参数里面传递数据，然后Home里面使用route来接收。

但如果是nav栏的返回按钮触发的返回呢？这个还能生效吗？估计不能，这时候就需要使用第三方状态管理库了。

76 - Stack Navigation Options

Stack.Screen的options属性：

效果：

如果想设置所有页面的nav和content的样式，可以在Stack.Navigator上设置screenOptions属性：

可以看到About页面并没有设置nav和content的样式，也成功有了样式。

77 - Dynamic Stack Navigator Options

方式 1：使用 options 属性的函数形式 (推荐)

在 Stack.Screen 的 options 属性中传入一个函数，该函数会接收到包含当前路由信息的对象。

xxxxxxxxxx
9
1
// App.js
2
​
3
<Stack.Screen
4
    name="About"
5
    component={AboutScreen}
6
    options={({ route }) => {
7
        title: route.params?.name || "";
8
    }}
9
/>

可以看到，跳转到About页面时，nav栏的标题变为了传递的参数。

方式 2：使用 navigation.setOptions() 方法 (最灵活)

当您需要根据屏幕内部的异步数据或用户交互（例如，用户在表单中输入内容、数据加载完成）来改变导航栏时，您需要在组件内部调用 navigation.setOptions() 方法。

78 - Drawer Navigation

接下来关于导航的内容，老师讲的都非常快，很多属性都是一笔带过，这个了解一下即可，现在流行expo router，就使用它即可。

Drawer Navigation 是 React Native 中非常常用的一种导航模式，通常用于提供应用主功能区域的入口，或放置不太常用的设置和配置项。它以一个从屏幕边缘滑入（通常是左侧）的侧边面板的形式呈现。参考文档：https://reactnavigation.org/docs/drawer-navigator

安装依赖：npm install @react-navigation/drawer， npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets

将原来的App.js改为AppStack.js，然后新建一个App.js文件。

xxxxxxxxxx
20
1
// App.js
2
​
3
import "react-native-gesture-handler";
4
import { NavigationContainer } from "@react-navigation/native";
5
import { createDrawerNavigator } from "@react-navigation/drawer";
6
import DashboardScreen from "./screens/DashboardScreen";
7
import SettingScreen from "./screens/SettingScreen";
8
​
9
const Drawer = createDrawerNavigator();
10
​
11
export default function App() {
12
  return (
13
    <NavigationContainer>
14
      <Drawer.Navigator>
15
        <Drawer.Screen name="Dashboard" component={DashboardScreen} />
16
        <Drawer.Screen name="Settings" component={SettingScreen} />
17
      </Drawer.Navigator>
18
    </NavigationContainer>
19
  );
20
}

创建两个相似的页面：

xxxxxxxxxx
26
1
// DashboardScreen.js
2
​
3
import { View, Text, StyleSheet } from "react-native";
4
​
5
const DashboardScreen = () => {
6
  return (
7
    <View style={styles.container}>
8
      <Text style={styles.text}>Dashboard Screen</Text>
9
    </View>
10
  );
11
};
12
​
13
export default DashboardScreen;
14
​
15
const styles = StyleSheet.create({
16
  container: {
17
    flex: 1,
18
    alignItems: "center",
19
    justifyContent: "center",
20
  },
21
  text: {
22
    fontSize: 24,
23
    fontWeight: "bold",
24
    marginBottom: 16,
25
  },
26
});

效果：

79 - Drawer Navigation Options

屏幕导航栏配置 (Header/Screen Options)

抽屉菜单项配置 (Drawer Item Appearance)

80 - Tab Navigation

安装npm install @react-navigation/bottom-tabs

将App.js文件名改为AppDrawer.js，然后创建App.js文件。

xxxxxxxxxx
21
1
// App.js
2
​
3
import { NavigationContainer } from "@react-navigation/native";
4
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
5
import HomeScreen from "./screens/HomeScreen";
6
import DashboardScreen from "./screens/DashboardScreen";
7
import SettingScreen from "./screens/SettingScreen";
8
​
9
const Tab = createBottomTabNavigator();
10
​
11
export default function App() {
12
  return (
13
    <NavigationContainer>
14
      <Tab.Navigator>
15
        <Tab.Screen name="Home" component={HomeScreen} />
16
        <Tab.Screen name="Dashboard" component={DashboardScreen} />
17
        <Tab.Screen name="Setting" component={SettingScreen} />
18
      </Tab.Navigator>
19
    </NavigationContainer>
20
  );
21
}

81 - Tab Navigation Options

标签栏条目配置 (Tab Bar Item Appearance)

屏幕/导航栏配置 (Screen & Header Options)

82 - Nesting Navigators

核心原则：

Stack Navigator 应该作为容器，包裹住 Tab Navigator 或 Drawer Navigator。

这是因为 Tab 和 Drawer 导航器通常代表应用的主要结构，而 Stack Navigator 负责处理每个主要部分的历史记录和屏幕之间的过渡效果。

Tab Navigator 作为应用主框架

这是最常见的模式。应用底部有一个固定的 Tab Bar，每个 Tab 内部管理自己的导航历史。

结构图

$\text{Stack} \rightarrow \text{Tab} \rightarrow \text{Stack}(\text{for each tab})$

实现方式：

1. 定义 Tab Navigator： 创建主 Tab 导航器，并在每个 Tab.Screen 的 component 中，嵌套一个独立的 Stack Navigator。
2. 定义 Stack Navigators： 每个 Tab 对应的 Stack 负责管理该 Tab 内部的页面跳转历史（例如：Home Stack 负责 Home 到 HomeDetails 的跳转）。
3. 定义 Root Stack： 最外层通常再用一个 Stack Navigator 来处理全局模态框（Modal）或身份验证流程（如 Login、Signup）。

示例代码：

xxxxxxxxxx
35
1
// 1. 定义每个 Tab 内部的 Stack 导航器
2
function HomeStackScreen() {
3
  return (
4
    <Stack.Navigator>
5
      <Stack.Screen name="Home" component={HomeScreen} />
6
      <Stack.Screen name="HomeDetails" component={HomeDetailsScreen} />
7
    </Stack.Navigator>
8
  );
9
}
10
​
11
// 2. 定义 Tab Navigator 作为应用主体
12
function MainTabs() {
13
  return (
14
    <Tab.Navigator>
15
      <Tab.Screen name="HomeTab" component={HomeStackScreen} />
16
      <Tab.Screen name="SettingsTab" component={SettingsScreen} />
17
    </Tab.Navigator>
18
  );
19
}
20
​
21
// 3. 定义最外层 Stack 导航器（用于 Modal 或 Login）
22
function RootNavigator() {
23
  return (
24
    <Stack.Navigator screenOptions={{ headerShown: false }}>
25
      {/* 登录/注册流程（假设用户未登录） */}
26
      <Stack.Screen name="Auth" component={AuthStackScreen} />
27
      
28
      {/* 主应用内容（用户已登录） */}
29
      <Stack.Screen name="MainApp" component={MainTabs} /> 
30
      
31
      {/* 全局模态框，例如全屏通知 */}
32
      <Stack.Screen name="GlobalModal" component={ModalScreen} options={{ presentation: 'modal' }} />
33
    </Stack.Navigator>
34
  );
35
}

经验法则：

1. Stack 是历史记录和过渡动画的管理者。 任何需要显示 Header、处理页面 push/pop 或全局模态框的地方，都需要 Stack 作为父级。
2. Tab 和 Drawer 是应用布局的管理者。 它们定义了屏幕之间的同级切换关系，通常被 Stack 包裹。